<template>
	<view class="see">
		<view class="see-title1">VR全景看大学</view>
		<view class="see-title2">点击大学名称即可带你观赏大学校园全貌</view>
		<view class="see-search"><u-search placeholder="请输入学校名称" v-model="keyword" @search="searchName" @custom="searchName"></u-search></view>
		<view class="see-search-sx">
			<view :class="areaListActive?'active':''" @click="areaShow = !areaShow;">筛选地区</view>
			<view :class="batchType == 'ben'?'active':''" @click="school_batch('ben')">本科</view>
			<view :class="batchType == 'zhuan'?'active':''" @click="school_batch('zhuan')">专科</view>
			<view :class="batchType == '985'?'active':''" @click="school_batch('985')">985院校</view>
			<view :class="batchType == '211'?'active':''" @click="school_batch('211')">211院校</view>
		</view>
		<view class="see-area" v-if="areaShow">
			<scroll-view scroll-x="true" >
				<view v-for="(item,i) in areaList" :key="i" @click="getArea(item)" :class="areaListActive.id == item.id?'active':''">{{item.province_str}}</view>
			</scroll-view>
		</view>
		
		<view class="list" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
		    <!-- ref="sibList" @isRefresh='isRefresh' @scrolltolowerFn="scrolltolowerFn" 此三个必须写 -->
		    <sib-list ref="sibList" @scrolltolowerFn="scrolltolowerFn">
		        <!-- 内部block可自定义 -->
		        <block class="" slot="sibScrollList">
		            <view class="see-list">
		            	<view v-for="(item,i) in list" :key="i">
		            		<text>{{item.school_name}}</text>
		            	</view>
		            </view>
		        </block>
		    </sib-list>
		</view>
	</view>
</template>

<script>
	import sibList from '@/components/sib-list/sib-list.vue'
	export default {
		components: {
		    sibList
		},
		data() {
			return {
				list: [],
				keyword: '',
				btchObj: '',
				batchType: '',
				index: 1,
				areaList: [],
				areaShow: false,
				areaListActive: ''
			}
		},
		methods:{
			// 刷新touch监听
			touchstart: function(e) {
			    this.$refs.sibList.refreshStart(e);
			},
			touchmove: function(e) {
			    this.$refs.sibList.refreshMove(e);
			},
			touchend: function(e) {
			    this.$refs.sibList.refreshEnd(e);
			},
			scrolltolowerFn: function() {
			    uni.showLoading({
			        title: '加载中...',
			        mask: true
			    })
				this.index++;
				if(this.btchObj){
					this.btchObj.page++;
					this.getBatch('more');
				}else {
					this.getListAll('more');
				}
				
			},
			getListAll(type) {
				this.http({
					url:`api/v1/school_vr/list?is_area=1&page=${this.index}`,
					method:'GET',
					success: res=> {
						if(res.errcode == 0){
							uni.hideLoading()
							if(type == 'more') {
								for (let s of res.result.list) {
									this.list.push(s)
								}
							}else {
								this.list = res.result.list;
							}
							
							this.areaList = res.result.schoolAreaList;
						}
					},
				})
			},
			// 
			school_batch(type) {
				this.areaListActive = '';
				this.areaShow = false;
				this.batchType = type;
				if(type == 'ben') {
					this.btchObj = {
						school_batch: 1,
						is_area: 0,
						page: this.index = 1
					}
					this.getBatch();
					this.index++;
					this.btchObj.page++;
					this.getBatch('more');
					this.index++;
					this.btchObj.page++;
					this.getBatch('more');
				}else if(type == 'zhuan') {
					this.btchObj = {
						school_batch: 2,
						is_area: 0,
						page: this.index = 1
					}
					this.getBatch();
					this.index++;
					this.btchObj.page++;
					this.getBatch('more');
					this.index++;
					this.btchObj.page++;
					this.getBatch('more');
				}else if(type == '985') {
					this.btchObj = {
						is_985: 1,
						is_area: 0,
						page: this.index = 1
					}
					this.getBatch();
					this.index++;
					this.btchObj.page++;
					this.getBatch('more');
					this.index++;
					this.btchObj.page++;
					this.getBatch('more');
				}else if(type == '211') {
					this.btchObj = {
						is_211: 1,
						is_area: 0,
						page: this.index = 1
					}
					this.getBatch();
					this.index++;
					this.btchObj.page++;
					this.getBatch('more');
					this.index++;
					this.btchObj.page++;
					this.getBatch('more');
				}
			},
			searchName() {
				this.areaListActive = '';
				this.areaShow = false;
				this.batchType = '';
				this.btchObj = {
					school_name: this.keyword,
					is_area: 0,
					page: this.index = 1
				}
				this.getBatch();
				this.index++;
				this.btchObj.page++;
				this.getBatch('more');
				this.index++;
				this.btchObj.page++;
				this.getBatch('more');
			},
			getBatch (type){
				this.http({
					url:`api/v1/school_vr/list`,
					method:'GET',
					data: this.btchObj,
					success: res=> {
						if(res.errcode == 0){
							uni.hideLoading()
							if(type == 'more') {
								for (let s of res.result.list) {
									this.list.push(s)
								}
							}else {
								this.list = res.result.list;
							}
						}
					},
				})
			},
			getArea(item) {
				this.batchType = '';
				this.areaListActive = item;
				this.btchObj = {
					area_code: item.province_code, 
					is_area: 0,
					page: this.index = 1
				}
				this.getBatch();
				this.btchObj.page++;
				this.getBatch('more');
				this.index++;
				this.btchObj.page++;
				this.getBatch('more');
			}
		},
		onLoad() {
			this.getListAll();
			this.index++;
			this.getListAll('more');
			this.index++;
			this.getListAll('more');
		}
	}
</script>

<style lang="less" scoped>
	.see-title1 {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin-top: 30rpx;
		margin-bottom: 10rpx;
	}
	.see-title2 {
		text-align: center;
	}
	.see-search {
		width: calc(100% - 60rpx);
		margin: 20rpx 30rpx;
		margin-right: 0;
	}
	.see-search-sx {
		display: flex;
		align-items:center;/*垂直居中*/
		justify-content: center;/*水平居中*/
		border: 1px solid #40c682;
		border-right: none;
		margin:0 10rpx;
		view {
			flex: 1;
			border-right: 1px solid #40c682;
			text-align: center;
			line-height: 70rpx;
		}
		.active {
			background-color: #40c682;
			color: #FFFFFF;
		}
	}
	.see-list {
		display: flex;
		align-items:center;/*垂直居中*/
		flex-wrap: wrap;
		margin-top: 30rpx;
		border-top: 1px solid #F1F1F1;
		view {
			width: 33.3%;
			text-align: center;
			border-right: 1px solid #F1F1F1;
			border-bottom: 1px solid #F1F1F1;
			height: 120rpx;
			position: relative;
			text {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				padding: 0 30rpx;
				width: 100%;
			}
		}
		view:nth-child(3n) {
			border-right: none;
		}
	}
	.see-area {
		margin-top: 20rpx;
		white-space: nowrap;
		overflow-x:scroll;
		view {
			display: inline-block;
			background-color: #F1F1F1;
			border-radius: 4px;
			padding: 10rpx 20rpx;
			margin-left: 16rpx;
			font-size: 24rpx;
		}
		.active {
			background-color: #40c682;
			color: #FFFFFF;
		}
	}
</style>
<style>
	page {
		height: 100%;
	}
</style>
